<template>
  <div>
    <ul class="list">
      <li v-for="(item,index) in List" :key="index">
        <div>
          <div class="header">
            <img :src="item.image" alt="ha">
          </div>
          <div class="title">
            {{ item.title }}
          </div>
          <div class="detail">
            {{ item.detail }}
          </div>
        </div>
      </li>
    </ul>

  </div>
</template>

<script>
import imgUrl from '@/assets/img/secondplate/img.png'
import imgUrl1 from '@/assets/img/secondplate/img_1.png'
import imgUrl2 from '@/assets/img/secondplate/img_2.png'
import imgUrl3 from '@/assets/img/secondplate/img_3.png'
import imgUrl4 from '@/assets/img/secondplate/img_4.png'
import imgUrl5 from '@/assets/img/secondplate/img_5.png'
import imgUrl6 from '@/assets/img/secondplate/img_6.png'
import imgUrl7 from '@/assets/img/secondplate/img_7.png'
export default {
  data() {
    return {
      List: [
        {
          image: imgUrl,
          title: '作业',
          detail: '81 种文档格式作业在线展示和批阅，实时查重，精准对比，避免学生抄袭。 自动管理成绩，一键下载作业数据。'
        },
        {
          image: imgUrl1,
          title: '考试/练习',
          detail: '单选、多选、填空、简答等10余种题型。支持题库随机抽题组卷。支持限时考试、选项随机等防作弊模式。'
        },
        {
          image: imgUrl2,
          title: '课件资料',
          detail: '课件、资料、话题、公告等教学内容支撑。在线制作方便快捷，提升备课效率。支持课前发布活动，课中互动，课后巩固。'
        },
        {
          image: imgUrl3,
          title: '课中互动',
          detail: '课件在线讲解、标记疑问 支持发言、开启弹幕、抢答、提问、话题讨论、黑板、画笔标注课堂要点，让课堂更精彩'
        },
        {
          image: imgUrl4,
          title: '考勤签到',
          detail: '二维码、数字口令、GPS等5种考勤形式， 精准有效、避免代签 签到数据自动生成，一键导出'
        },
        {
          image: imgUrl5,
          title: '成绩管理',
          detail: '汇总互动数据、平时成绩、期末成绩 个性化配置成绩权重占比数据报表一键导出下载，课留存，可追溯'
        },
        {
          image: imgUrl6,
          title: '教学数据分析',
          detail: '全方位教学数据信息化，可视化实时监测教学质量，把控教学进度，学业预警分析，提升教学效果'
        },
        {
          image: imgUrl7,
          title: '直播-云录屏',
          detail: '满足线上线下混合式教学场景 动画及课件同屏+语音实现轻量级直播 不限人员数量，手机电脑均可参与'
        },
      ]
    }
  },

}

</script>

<style scoped>


.header {
  width: 87px;
  height: 82px;
  margin: 0 auto 24px;
}

.header img {
  width: 87px;
  height: 82px;
  display: block;
  margin: 0 auto;
}

.title {
  font-weight: 600;
  color: #1f2023;
  font-size: 32px;
  margin-bottom: 25px;
}

.detail {
  font-size: 20px;
  color: #74787c;
  line-height: 33px;
}

li {
  list-style-type: none;
  height: 450px;
  text-align: center;
  width: 400px;
  background: linear-gradient(180deg, #fff, #f4f8ff 130%);
  border-radius: 8px 8px 0 8px;
  margin-top: 55px;
  padding: 40px 24px;
}

.list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
</style>